<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>坑位分析</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css"/>
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-select.min.css">
	</head>
	<style>th,td{text-align: center;}
	.detailHead th {background-color:#84db56!important;color:#fff;}
	.detailHead td{background-color:#f3f0eb!important}
	</style>
	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
				<!-- 筛选条件开始 -->
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header widget-header-small">
									<h4 class="widget-title">坑位分析</h4>
								</div>
								<div class="widget-body" style="background-color: #EFF3F8;">
									<div class="widget-main">
										<form class="form-inline" id="searchForm" method="post" action="#">
											<div class="form-group">
												<label for="exampleInputName2">选择时段
													<input type="text" id="config-demo" name="chooseTime" id="chooseTime" class="form-control time">
													<button id="app_search" type="button"  onclick="replaceDate(this,'1');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span>
														昨日
													</button>
													<button id="app_search" type="button"  onclick="replaceDate(this,'7');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span>
														过去7天
													</button>
													<button id="app_search" type="button"  onclick="replaceDate(this,'31');" class="btn btn-white btn-sm">
														<span class="ace-icon icon-on-right bigger-110"></span>
														过去31天
													</button>
												</label>
											</div>
											<div class="form-group">
												<label style="margin-left: 30px;">平台</label>
												<select class="selectpicker" multiple  name="platform" id="platform" style="width:100px;" title="全部">
													<option value="wap">WAP</option>
													<option value="android">Android</option>
													<option value="ios">IOS</option>
													<option value="pc">PC</option>
													<option value="">全部</option>
												</select>
											</div>
											<div class="form-group">
                                                <label style="margin-left: 30px;">频道 </label>
												<select class="chosen-select"  name="pageName" id="pageName"  style="width:100px;">
													<option value="" selected>全部</option>
													<option value="zby">周边游</option>
													<option value="jaj">酒+景</option>
												</select>
											</div>
											<div class="form-group">
												<button type="button" class="btn btn-pink btn-sm"  style="margin-left: 50px;" id="search">
													<span class="ace-icon fa fa-search icon-on-right bigger-110"></span> Search
												</button>
											</div>
											
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 筛选条件结束 -->
					
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box transparent">
								<div class="widget-body">
									<div class="widget-main no-padding">
										<table class="table table-bordered table-striped" id="simple-table">
											<thead class="thin-border-bottom" id="detail">
												<tr>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>序号 </th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>坑位名称</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>坑位点击量(PV)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>用户点击量(UV)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>订单(个)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>营收(元)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>支付完成订单(个)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>支付完成营收(元)</th>
													<th> <i class="ace-icon fa fa-caret-right blue"></i>操作</th>
												</tr>
											</thead>
										</table>

										<div class="ui-jqgrid1">
											<div id="grid-pager"
												 class="ui-state-default ui-jqgrid-pager ui-corner-bottom"
												 dir="ltr">
												<div id="pg_grid-pager" class="ui-pager-control" role="group">
													<input type="text" id="currentPage" hidden="true" value=1>
													<input type="text" id="page_size" value =10 hidden="true">
													<input type="text" id="page_total" hidden="true">
													<table cellspacing="0" cellpadding="0" border="0"
														   class="ui-pg-table"
														   style="width: 100%; table-layout: fixed; height: 100%;"
														   role="row">
														<tbody>
														<tr>
															<td id="grid-pager_left" align="left"></td>
															<td id="grid-pager_center" align="center"
																style="white-space: pre; width: 343px;"><table
																	cellspacing="0" cellpadding="0" border="0"
																	style="table-layout: auto;" class="ui-pg-table">
																<tbody>
																<tr>
																	<td id="first_grid-pager"
																		onclick="showPage('firstPage')"
																		class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																	<td id="prev_grid-pager"
																		onclick="showPage('prePage')"
																		class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																	<td dir="ltr">Page <input class="ui-pg-input" id="page_num"
																							  type="text" size="2" maxlength="7" disabled="true"
																							  value="${page.pageNum!}" role="textbox"> of <span
																			id="sp_1_grid-pager">${page.pages!}</span></td>
																	<td id="next_grid-pager"
																		onclick="showPage('nextPage')"
																		class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																	<td id="last_grid-pager"
																		onclick="showPage('lastPage')"
																		class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																		style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
																</tr>
																</tbody>
															</table></td>

															<td id="grid-pager_right" align="right">
																<div dir="ltr" style="text-align: right" class="ui-paging-info">View
																	<span id="view_start_row"></span> - <span id="view_end_row"></span>
																	of <span id="view_page_total"></span>
																</div>
															</td>
														</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="row" style="padding-top: 5px;" id="pit_title">
						<div class="col-xs-12">
							<div class="widget-box">
								<div class="widget-header widget-header-small">
									<h4 class="widget-title">坑位引流各品类图形分析</h4>
								</div>
							</div>
						</div>
					</div>
                    <div class="row" id="chartDetail">
                        <div class="col-xs-12">
                            <div class="row">
								<div class="col-xs-12">
									<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
										<div class="widget-box">
											<div class="widget-body">
												<div class="widget-header widget-header-small">
													<h4 class="widget-title">完成支付营收量<span id="payMonenytotal"></span></h4>
												</div>
												<div class="widget-main">
													<div id="piechart-placeholder" style="height: 300px;"></div>
												</div>
											</div>
										</div>
									</div>

									<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
										<div class="widget-box">
											<div class="widget-body">
												<div class="widget-header widget-header-small">
													<h4 class="widget-title">完成支付订单量<span id="payAmountTotal"></span></h4>
												</div>
												<div class="widget-main">
													<div id="piechart-order" style="height: 300px;"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
	                                <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
	                                    <div class="widget-box">
	                                    	<div class="widget-header widget-header-flat">
												<h4 class="widget-title lighter">
													<i class="ace-icon fa fa-star orange"></i><span>坑位引流各品类统计图(PV)</span>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>一段时间内该坑位到达各品类的访问量总和<span class="content_name"></span><s></s></span>
													</label>
													<small class="pink">单击节点, 发现更多</small>
												</h4>
											</div>
	                                        <div class="widget-body">
	                                            <div id="barchart" style="height: 400px;"></div>
	                                        </div>
	                                    </div>
	                                </div>
	                                <div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
	                                    <div class="widget-box">
	                                        <div class="widget-header widget-header-flat">
												<h4 class="widget-title lighter">
													<i class="ace-icon fa fa-signal blue"></i><span>坑位引流各品类趋势图（PV）</span>
													<label class="help_img">
														<i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#999999!important;"></i>
														<span class='tips'>一段时间内该坑位到达各品类逐日访问量<span class="content_name"></span><s></s></span>
													</label>
												</h4>
											</div>
	                                        <div class="widget-body">
	                                            <div id="linechart" style="height: 400px;"></div>
	                                        </div>
	                                    </div>
	                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.row -->
            </div><!-- /.col -->
        </div><!-- /.row -->
        <!-- basic scripts -->
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		<script src="${rc.contextPath}/javascripts/moment.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/dateRange.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/slider.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/g2-modal.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
		<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap-select.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/i18n/defaults-zh_CN.min.js"></script>
<script type="text/javascript">
    var yDataAmonut1=[];
    var funnelIndex = 0;
    d3.select(self.frameElement).style("height", "1500px");

    $(document).ready(function(){
        $("#search").click();
    });

    $("#search").on("click",function(){
        var currentPage = '1';
        var page_size = $("#page_size").val();
        getThemeTab(currentPage,page_size);
    });
    function getThemeTab(currentPage,page_size){
        var platform = $("#platform").val();
        if(platform != null){
            platform = platform.toString();
        }
        var chooseTime = $("#config-demo").val();
        var pageName = $("#pageName").val();
        $.ajax({
            url: "${rc.contextPath}/positionAnalysis/queryList",
            type : "POST",
            data : {
                platform:platform,
                chooseTime:chooseTime,
                pageName:pageName,
                pageCurrentNum:currentPage,
                pageSize:page_size
            },
            dataType:"json",
            beforeSend: function(){
                $("#search").attr("disabled",true);
            },
            complete: function(){
                $("#search").attr("disabled",false);
            },
            success:function(data) {
                var page=data.page;
                if(page.pages>1){
                    $("#page_total").val(page.pages);
                    $("#currentPage").val(page.pageNum);
                    $("#page_num").val(page.pageNum);
                    $("#sp_1_grid-pager")[0].innerText=page.pages;
                    $("#view_start_row")[0].innerText= page.startRow;
                    $("#view_end_row")[0].innerText= page.endRow;
                    $("#view_page_total")[0].innerText= page.total;
                    $(".ui-jqgrid1").show();
                }else{
                    $(".ui-jqgrid1").hide();
                }

                $(".mobileTab").remove();
                if(data !="" && page.list.length != 0){
                    $("#theme_title").show();
                    var tbody = "";
                    $.each(page.list,function(n,value) {
                        var orderAmount  = 0;
                        var orderMoney  = 0;
                        var payAmount  = 0;
                        var payMoney  = 0;
                        if(value.orderAmount != null){
                            orderAmount = value.orderAmount;
                            orderMoney = value.orderMoney;
						}
						if(value.payAmount != null){
                            payAmount = value.payAmount;
						}
						if(value.payMoney != null){
                            payMoney = value.payMoney;
						}
						if(value.code.indexOf("3PinD") != -1){
                            tbody +=  "<tbody class='mobileTab' ><tr class='productDetail'>"+
                                "<td class='center'>"+ (n+1) +"</td>"+
                                "<td>"+ value.name+"(页面访问量总计)</td>"+
                                "<td>"+ value.clickNum+"</td>"+
                                "<td></td>"+
                                "<td></td>"+
                                "<td></td>"+
                                "<td></td>"+
                                "<td></td>"+
                                "<td><button type='button' class='btn btn-xs btn-info btnTail' data-toggle='button'>查看</button></td>"+
                                "</tr></tbody><tbody class='detail-row mobileTab' data-show='1' style='display:none' align='center'></tbody>";
						}else{
                            tbody +=  "<tbody class='mobileTab' ><tr class='productDetail'>"+
                                "<td class='center'>"+ (n+1) +"</td>"+
                                "<td>"+ value.name+"</td>"+
                                "<td>"+ value.clickNum+"</td>"+
                                "<td>"+ value.userClick+"</td>"+
                                "<td>"+ orderAmount+"</td>"+
                                "<td>"+ orderMoney+"</td>"+
                                "<td>"+ payAmount+"</td>"+
                                "<td>"+ payMoney+"</td>"+
                                "<td onclick='showCharts(\"" + value.code +"\",this)'><button type='button' class='btn btn-xs btn-info btnTail' data-toggle='button'>查看</button></td>"+
                                "</tr></tbody><tbody class='detail-row mobileTab' data-show='1' style='display:none' align='center'></tbody>";
						}

                    });
                    $("#chartDetail").show();
                }else{
                    var tbody='<tbody class="mobileTab"><tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr></tbody>';
                    $("#chartDetail").hide();
                    $("#theme_title").hide();
                }
                $("#detail").after(tbody);

            },
            error:function(data) {
                showMsg("查询数据有误");
            }
        });

        $.ajax({
            url: "${rc.contextPath}/positionAnalysis/chartData",
            data:{
                "platform":platform,"chooseTime":chooseTime,"code":"","pageName":pageName
			},
            dataType:"json",
            success: function(data){
                $("#payMonenytotal").html('(￥'+data.payMoneyTotal+')');
                $("#payAmountTotal").html('('+data.payAmountTotal+')');
                pieChartModal(data.payMoneyJsonData,'piechart-placeholder','categoryName','amount',300);
                pieChartModal(data.payAmountJsonData,'piechart-order','categoryName','amount',300);
                var defs = {
                    'categoryName': {
                        alias : '品类'
                    },
                    'amount': {
                        alias :'浏览量(/次)'
                    },
                    'time':{
                        type: 'time',
                        tickCount: 8
                    }
                };
                var chart = histogramModal(data.jsonData2,'barchart','categoryName','amount','品类','浏览量(/次)',400,defs);
                chart.on('plotclick', function (ev) {
                    var data = ev.data;
                    if (data) {
                        getPageDetail(data._origin.categoryName,code);
                    }
                });
                $("#barchart").css("cursor","pointer");
                lineChartModal(data.jsonData,'linechart','time','amount','categoryName','','浏览量(/次)',400,defs);
                if(chart.getAllGeoms()[0].getData()[0]){
                    getPageDetail(chart.getAllGeoms()[0].getData()[0]._origin.categoryName,code);
                }
            }

        });
    }

 	function reflesh(){
      $("#iframeReload").attr("href","/rhino/positionAnalysis/positionTree")
  }

    function showCharts(code,obj){
        $(".topic_name").html($(obj).parent("tr").children("td").eq(1).html());
        $("#simple-table tr").css("background-color","");
        $(obj).parent("tr").css("background-color","#d9edf6");
        var platform = $("#platform").val();
        if(platform != null){
            platform = platform.toString();
        }
        var chooseTime = $("#config-demo").val();
        var pageName = $("#pageName").val();
        $.ajax({
            url: "${rc.contextPath}/positionAnalysis/chartData",
            data:{"platform":platform,"chooseTime":chooseTime,"code":code,"pageName":pageName},
            dataType:"json",
            success: function(data){
                $("#payMonenytotal").html('(￥'+data.payMoneyTotal+')');
                $("#payAmountTotal").html('('+data.payAmountTotal+')');
				var exportForm1={
					'headers':['品类','营收量'],
					'cols':['categoryName','amount']
				};
				var exportForm2={
					'headers':['品类','订单量'],
					'cols':['categoryName','amount']
				};
                pieChartModal(data.payMoneyJsonData,'piechart-placeholder','categoryName','amount',300,"",exportForm1);
                pieChartModal(data.payAmountJsonData,'piechart-order','categoryName','amount',300,"",exportForm2);
                var defs = {
                    'categoryName': {
                        alias : '品类'
                    },
                    'amount': {
                        alias :'浏览量(/次)'
                    },
                    'time':{
                        type: 'time',
                        tickCount: 8
                    }
                };
                var chart = histogramModal(data.jsonData2,'barchart','categoryName','amount','品类','浏览量(/次)',400,defs);
                chart.on('plotclick', function (ev) {
                    var data = ev.data;
                    if (data) {
                        getPageDetail(data._origin.categoryName,code);
                    }
                });
                $("#barchart").css("cursor","pointer");
                lineChartModal(data.jsonData,'linechart','time','amount','categoryName','','浏览量(/次)',400,defs);
                if(chart.getAllGeoms()[0].getData()[0]){
                    getPageDetail(chart.getAllGeoms()[0].getData()[0]._origin.categoryName,code);
                }
            }

        });
//        var startTime = chooseTime.split("-")[0];
//        var endTime = chooseTime.split("-")[1] + ' 23:59:59';
//        $.ajax({
//            url:'${rc.contextPath}/specialTopic/getTopicFunnel',
//            type:'GET',
//            dataType:'json',
//            data: {
//                code:code,
//                startTime:startTime,
//                endTime:endTime
//            },
//            success:function (result) {
//                //专题pv漏斗
//                yDataAmonut1 = result;
//                funnelModal(yDataAmonut1,'funnelPlot','name','value','PV',400);
//            }
//        });
    }
    function getLengend(map) {
        var arr=[];
        if(map != ""){
            $.each(map,function(key,value) {
                arr.push(key);
            });
        }
        return arr;
    }

    function showPage(param) {
         var endrow = parseInt($("#sp_1_grid-pager")[0].innerText);
         var currentPage = parseInt($("#currentPage").val());
         var page_size = $("#page_size").val();
         var flag = 0;
         if('firstPage'==param) {
             currentPage =1;
         }
         else if('prePage'==param) {
             if(currentPage==1){
                 currentPage ==1;
                 flag = 1;
             }else{
                 currentPage = currentPage-1;
             }
         }
         else if('nextPage'==param) {
             if(currentPage==endrow){
                 currentPage = endrow;
                 flag = 1;
             }else{
                 currentPage = currentPage+1;
             }
         } else if('lastPage'==param) {
             currentPage = endrow;
         }
         if(flag==0){
             getThemeTab(currentPage,page_size);
         }
     }
    
    function getPageDetail(category_name){
        var platform = $("#platform").val();
        if(platform != null){
            platform = platform.toString();
        }
        var chooseTime = $("#config-demo").val();
        var pageName = $("#pageName").val();
        $("#category_name").html(category_name);
        $.ajax({
            url: "${rc.contextPath}/positionAnalysis/getPageChartData",
            data:{"platform":platform,"chooseTime":chooseTime,category_name:category_name,"pageName":pageName},
            dataType:"json",
            success: function(data){
            	var yData5 = ['详情页', '订单填写页', '下单页', '支付页'];
				var pitForPage = data.pitForPage;
				var jsonData = [];
				jsonData.push({page:"详情页",value:pitForPage.detailPageSum},
						{page:"订单填写页",value:pitForPage.fillOrderPageSum},
						{page:"下单页",value:pitForPage.pendingPaymentPageSum},
						{page:"支付页",value:pitForPage.completedPaymentPageSum});
				var exportForm={
					'headers':['页面类型','浏览量'],
					'cols':['page','value']
				}		
				horizontalHistogramModal(jsonData,'pagebarchart','page','value',300,"",exportForm);
            }
        });
    }

</script>
</body>
</html>